<template>
  <div class="chat-page">
    <van-nav-bar title="云音乐小秘书" left-arrow @click-left="$router.back()" />
    <div class="chat-list">
      <div v-for="(msg, idx) in messages" :key="msg.id">
        <div v-if="msg.time" class="msg-time">{{ msg.time }}</div>
        <div class="chat-item">
          <div class="avatar">
            <img :src="msg.avatar" />
          </div>
          <div class="bubble">
            <div class="content">{{ msg.text }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="chat-input">
      <input v-model="input" placeholder="发送消息" @keyup.enter="sendMsg" />
      <van-icon name="smile" size="24" />
      <van-icon name="send" size="24" @click="sendMsg" />
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const input = ref('')
const systemAvatar = 'https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800'
const messages = ref([
  { id: 1, time: '2024年06月02日 16:02', avatar: systemAvatar, text: '恭喜你获得3个月网易云音乐黑胶VIP' },
  { id: 2, time: '2024年08月14日 21:00', avatar: systemAvatar, text: '恭喜你获得3天网易云音乐黑胶VIP' },
  { id: 3, time: '', avatar: systemAvatar, text: '不想收到陌生人私信？可在账号-设置-消息和隐私中更改。或点击右上角…菜单，加入黑名单。' },
  { id: 4, time: '', avatar: systemAvatar, text: '恭喜你获得3天网易云音乐黑胶VIP' },
  { id: 5, time: '18:15', avatar: systemAvatar, text: '您的账号已通过以下方式登录\n登录方式:QQ\n登录时间:2025-07-06 18:15\n登录设备:iphone\n登录地点:北京\n(763.144.199.**)附近\n\n如非本人登录，请尽快修改密码\n如果是本人操作，请忽略此次提醒' }
])
function sendMsg() {
  if(input.value.trim()) {
    messages.value.push({ id: Date.now(), avatar: systemAvatar, text: input.value, time: '' })
    input.value = ''
  }
}
</script>
<style scoped>
.chat-page { background: var(--van-background-color, #fff); min-height: 100vh; color: var(--van-text-color, #222); display: flex; flex-direction: column; }
.chat-list { flex: 1; padding: 16px; overflow-y: auto; }
.msg-time { text-align: center; color: #aaa; font-size: 13px; margin: 18px 0 8px 0; }
.chat-item { display: flex; align-items: flex-start; margin-bottom: 16px; }
.avatar img { width: 38px; height: 38px; border-radius: 50%; }
.bubble { max-width: 80%; margin-left: 10px; }
.content { background: var(--van-cell-background-color, #f4f4f4); border-radius: 12px; padding: 10px 16px; font-size: 15px; color: var(--van-text-color, #222); word-break: break-all; white-space: pre-line; }
.chat-input { display: flex; align-items: center; padding: 10px 16px; border-top: 1px solid var(--van-border-color, #eee); background: var(--van-cell-background-color, #fff); }
.chat-input input { flex: 1; border: none; outline: none; background: var(--van-background-color, #fff); color: var(--van-text-color, #222); border-radius: 16px; padding: 8px 12px; margin-right: 8px; }
</style> 